<template>
  <div id="home">
    <el-container>
      <el-header>
        <span
          >2024-2025学年广东省职业院校技能大赛（中职组）舞蹈表演赛项计分系统</span
        >
        <span>
          <el-dropdown>
            <span class="el-dropdown-link"> hi~欢迎使用 </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="quit">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </span>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
            class="el-menu-vertical-demo"
            active-text-color="#ffd04b"
            background-color="#113895"
            text-color="#fff"
            :router="routes"
            :default-active="$router.currentRoute.value.fullPath"
          >
            <el-menu-item
              :index="item.path"
              v-for="item in routes"
              :key="item.path"
            >
              <el-icon><icon-menu /></el-icon>
              <span>{{ item.title }}</span>
            </el-menu-item>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, reactive, watch, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";
let router = useRouter();
let routes = [
  // {
  //   name: "setting",
  //   path: "/setting",
  //   title: "专家设定", //数据设定
  // },
  // {
  //   name: "basic",
  //   path: "/basic",
  //   title: "舞蹈基本功", //舞蹈基本功
  // },
  // {
  //   name: 'impromptu',
  //   path: '/impromptu',
  //   title: '即兴表演',//即兴表演
  // },
  // {
  //   name: 'inspect',
  //   path: '/inspect',
  //   title: '专业知识考察',//专业知识考察
  // },
  // {
  //   name: 'show',
  //   path: '/show',
  //   title: '剧目展示',//剧目展示
  // },
  // {
  //   name: 'collect',
  //   path: '/collect',
  //   title: '数据汇总',//数据汇总
  // },
  {
    name: "setting",
    path: "/setting",
    title: "专家设定", //数据设定
  },
  {
    name: "school",
    path: "/school",
    title: "学校名单", //学校设定
  },
  {
    name: "skill",
    path: "/skill",
    title: "模块一：技能测试", //技能测试
  },
  {
    name: "synthesize",
    path: "/synthesize",
    title: "模块二：综合展示", //综合展示
  },
  {
    name: "collect2025",
    path: "/collect2025",
    title: "分数汇总", //数据汇总
  },
];

const quit = () => {
  localStorage.clear();
  router.push("/");
};
</script>

<style lang="less" scoped>
#home {
  min-height: 100vh;

  .el-header {
    /* border-bottom: 1px solid #ccc; */
    background: #113895;
    padding: 0 50px;
    display: flex;
    justify-content: space-between;

    span {
      color: white;
      line-height: 60px;
      font-size: 20px;
    }
  }

  .el-aside {
    height: calc(100vh - 60px);
    background: #113895;
    float: left;

    .el-menu {
      border-right: none;
    }

    .el-menu-item.is-active {
      background: #0e2d77;
    }
  }

  .el-main {
    float: right;
    height: 100%;
    width: calc(100% - 200px);
    padding-bottom: 0;
  }
}
</style>
